<template>
  <!-- 添加号源 -->
  <el-dialog title="号源设置" :visible="value" width="400px" custom-class="dialog-box" @close="onClose" @open="onOpen" :close-on-click-modal="false" :append-to-body="true">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" @submit.native.prevent="onSubmit">
      <el-form-item label="科室：" prop="deptId">
        <deptSearch v-model="form.deptId" @change="onChangeDept"></deptSearch>
      </el-form-item>
      <el-form-item label="医生：" prop="doctorId">
        <doctorSearch ref="doctorSearch" v-model="form.doctorId" :deptId="form.deptId"></doctorSearch>
      </el-form-item>
      <el-form-item label="日期：" prop="dateDay">
        <el-date-picker v-model="form.dateDay" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="时间：" prop="timeId">
        <el-select v-model="form.timeId">
          <el-option v-for="(item,index) in timeArr" :key="index" :label="item.startTime+'~'+item.endTime" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: ["value"],
  components: {
    deptSearch: () => import("@/pages/_com/deptSearch.vue"),
    doctorSearch: () => import("@/pages/_com/doctorSearch.vue")
  },
  data() {
    return {
      btnLoading: false,
      form: {
        deptId: "",
        doctorId: "",
        dateDay: "",
        timeId: ""
      },
      rules: {
        deptId: [{ required: true, message: "此项必填", trigger: "change" }],
        doctorId: [{ required: true, message: "此项必填", trigger: "change" }],
        dateDay: [{ required: true, message: "此项必填", trigger: "change" }],
        timeId: [{ required: true, message: "此项必填", trigger: "change" }]
      },
      timeArr: []
    };
  },
  methods: {
    onSubmit() {
      let th = this;
      let j = {};
      let fn = function() {
        th.btnLoading = true;
        th.$api
          .addSource(j)
          .then(res => {
            if (res.executed) {
              th.$message.success("新增成功");
              th.$emit("success");
              th.onClose();
            } else {
              th.$message.error(res.message);
            }
            th.btnLoading = false;
          })
          .catch(() => {
            th.btnLoading = false;
          });
      };
      th.$refs["form"].validate(v => {
        if (v) {
          Object.assign(j, th.form);
          fn();
        }
      });
    },
    //获取号源
    getDoctorSourceByDay() {
      let th = this;
      if (!th.form.doctorId || !th.form.deptId || !th.form.dateDay) return;
      let j = {
        doctorId: th.form.doctorId,
        dateDay: th.form.dateDay,
        deptId: th.form.deptId
      };
      th.$api.getDoctorSourceByDay(j).then(res => {
        if (res.executed) {
          th.timeArr = res.dataBody;
        }
      });
    },
    onChangeDept() {
      let th = this;
      th.form.doctorId = "";
      th.$nextTick(function() {
        th.$refs["doctorSearch"].getData();
      });
    },
    onOpen() {},
    onClose() {
      let th = this;
      th.$refs["form"].resetFields();
      th.$emit("input", false);
    }
  },
  watch: {
    form: {
      deep: true,
      handler: function(n) {
        let th = this;
        th.getDoctorSourceByDay();
      }
    }
  }
};
</script>